<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/main.css">
		<title>蘑菇街-你的剁手街</title>
	</head>

	<!-- 
	 主题框架
	 
	一些准备工作
	
	结构划分
	 
	 
	细节调整 1
	
	导航栏
	header 搜索栏
	主促销
	
	 7:45 
	 
	 #todo
	  细节调整2 
	  下面的分类页
	  各种分类促销
	 
	 
	 
	 -->
	<body>



		<div class="top-nav clear-float ">

			<div class="container ">

				<div class="lf">
					<a href="#" class="item">首页</a>
				</div>

				<div class="rf">
					<a href="#" class="item">我的订单</a>
					<a href="#" class="item">收藏夹</a>
					<a href="#" class="item">登录</a>
					<a href="#" class="item">注册</a>
					<a href="#" class="item">客户服务</a>
				</div>
			</div>


		</div>

		<div class="header clear-float">

			<div class="container">

				<div class="col-2 logo">
					蘑菇街logo

				</div>

				<div class="col-5 search-bar">
					<input type="text">
					<button type="button" class="search-btn">搜索</button>
				</div>

				<div class="col-3 cart">
					<a href="#"> 我的购物车</a>
					<!-- <button type="button">我的购物车</button> -->
				</div>
			</div>

		</div>

		</div>
		<div class="main-promote clear-float">

			<div class="container">

				<div class="col-2 cat">

					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>

					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>



				</div>
				<div class="col-6">
					<div class="slider">
						<img src="image/slide_01.png">
					</div>

					<div class="sub-promote">
						<!-- 子促销 -->

						<div class="col-5">
							<img src="image/sub-promte-01.png">
						</div>
						<div class="col-5"><img src="image/sub-promte-02.png"></div>

					</div>

				</div>
				<div class="col-2 userinfo">

					<div class="auth clear-float">

						<div class="avatar">
						</div>
						Hello, whh

						<!-- 登录 注册 -->

					</div>

					<div class="announce">

						<div>公告</div>

						<div class="content">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit incidunt debitis accusamus
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
							laboriosam rem! Sequi sed.
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit incidunt debitis accusamus
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
							laboriosam rem! Sequi sed.
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
						</div>

					</div>

				</div>


			</div>



		</div>
		<div class="cat-promote clear-float">
			<!-- 商品分类促销 -->
			<div class="container">

				<div class="title">女装</div>

				<div class="content">

					<div class="col-25 item">

						<div class="card">
							AAAA
						</div>

					</div>
					<div class="col-25 item">
						<div class="card">
							BBBBBB
						</div>
					</div>
					<div class="col-25 item">
						<div class="card">
							CCCCCCCCCCC
						</div>
					</div>
					<div class="col-25 item">
						<div class="card">
							DDDDD
						</div>
					</div>

				</div>


			</div>

		</div>






		<div class="cat-promote clear-float">
			<!-- 商品分类促销 -->
			<div class="container">

				<div class="title">品牌闪购</div>

				<div class="content">

					<div class="col-5 item">

						<div class="card">
							AAAA
						</div>

					</div>
					<div class="col-5 item">
						<div class="card">
							BBBBBB
						</div>
					</div>

				</div>


			</div>



		</div>





		<div class="cat-promote clear-float">
			<!-- 商品分类促销 -->
			<div class="container">

				<div class="title">每日特价</div>

				<div class="content">

					<div class="col-2 item">

						<div class="card">
							AAAA
						</div>

					</div>
					<div class="col-3 item">
						<div class="card">
							BBBBBB
						</div>
					</div>
					<div class="col-2 item">
						<div class="card">
							CCCCCCCCCCC
						</div>
					</div>
					<div class="col-3 item">
						<div class="card">
							DDDDD
						</div>
					</div>

				</div>


			</div>



		</div>





		<div class="cat-promote clear-float">
			<!-- 商品分类促销 -->
			<div class="container">

				<div class="title">新品首发</div>

				<div class="content">

					<div class="col-2 item">

						<div class="card">
							AAAA
						</div>

					</div>
					<div class="col-3 item">
						<div class="card">
							BBBBBB
						</div>
					</div>
					<div class="col-2 item">
						<div class="card">
							CCCCCCCCCCC
						</div>
					</div>
					<div class="col-3 item">
						<div class="card">
							DDDDD
						</div>
					</div>

				</div>


			</div>



		</div>




		<div class="footer clear-float">

			<div class="container">

				<div class="item">
					<a href="#">关于我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">商务合作</a>
					<a href="#">寻求报道 400-110-1108</a>
					<a href="#">在线客服</a>
					<a href="#">工作时间 8:30-22:00</a>
				</div>


				<div class="item">
					公安备案号11010502030143
					京ICP备19004658号
					京网文〔2020〕1039-165号
					经营性网站备案信息
					北京互联网违法和不良信息举报中心
				</div>

				<div class="item">
					家长监护
					网络110报警服务
					中国互联网举报中心
					Chrome商店下载
					©1999-2022北京创新乐知网络技术有限公司
					版权与免责声明
					版权申诉
				</div>

			</div>
		</div>
	</body>
</html>
